import React, { useState, useEffect } from 'react';
import styles from './index.less';
import CardCommon from '@/compontents/cardCommon';
import lhTool from 'lh-tool';
import api from '@/http/api';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Button, Modal, Table, Tooltip, Select, Switch } from 'antd';
import util from '@/compontents/util.js';
const { confirm } = Modal;
const { Option } = Select;

const {
  uBusinessManageList,
  uBusinessManageDelete,
  uBusinessEnterTop,
  uTopList,
  uSchoolManageList,
  handleAccount,
  handleAccountResult,
  uBusinessManageGround,
} = api;
export default (props: any) => {
  const { manageId, schoolId } = JSON.parse(sessionStorage.info).userInfo;
  const columns: any = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
      width: 100,
      render: (text: any, record: any, index: any) => `${index + 1}`,
    },
    {
      title: '商家标题',
      dataIndex: 'title',
      ellipsis: {
        showTitle: false,
      },
      render: (v1: any, v2: any) => (
        <Tooltip placement="topLeft" title={v2.title}>
          {v2.title}
        </Tooltip>
      ),
      width: 200,
    },
    {
      title: '分账比例',
      dataIndex: 'scale',
      width: 120,
    },
    {
      title: '商家实名',
      dataIndex: 'wxName',
      width: 120,
    },
    {
      title: '商家电话',
      dataIndex: 'tel',
      width: 120,
    },
    {
      title: '商家地址',
      dataIndex: 'address',
      ellipsis: {
        showTitle: false,
      },
      render: (v1: any, v2: any) => (
        <Tooltip placement="topLeft" title={v2.address}>
          {v2.address}
        </Tooltip>
      ),
      width: 200,
    },
    {
      title: '商家上架时间',
      dataIndex: 'time',
      ellipsis: {
        showTitle: false,
      },
      render: (v1: any, v2: any) => (
        <Tooltip placement="topLeft" title={util.formatTime(v2.time)}>
          {util.formatTime(v2.time)}
        </Tooltip>
      ),
      width: 180,
    },
    {
      title: '活动结束时间',
      dataIndex: 'endTime',
      ellipsis: {
        showTitle: false,
      },
      render: (v1: any, v2: any) => (
        <Tooltip placement="topLeft" title={util.formatTime(v2.endTime)}>
          {util.formatTime(v2.endTime)}
        </Tooltip>
      ),
      width: 180,
    },
    {
      title: '商家营业时间',
      dataIndex: 'businessTime',
      ellipsis: {
        showTitle: false,
      },
      render: (v1: any, v2: any) => (
        <Tooltip placement="topLeft" title={v2.businessTime}>
          {v2.businessTime}
        </Tooltip>
      ),
      width: 180,
    },
    {
      title: '操作',
      dataIndex: 'handle',
      width: 300,
      fixed: 'right',
      render: (v1: any, v2: any) => (
        <div>
          <Button
            onClick={() => {
              toTicket(v2);
            }}
            size="small"
            type="primary"
            style={{ marginLeft: 10 }}
          >
            套餐券
          </Button>
          <Button
            onClick={() => {
              toAdd(0, v2);
            }}
            style={{ marginLeft: 10 }}
            size="small"
            type="primary"
          >
            编辑
          </Button>
          <Button
            disabled
            onClick={() => {
              toDelete(v2);
            }}
            style={{ marginLeft: 10 }}
            size="small"
            danger
            type="primary"
          >
            删除
          </Button>
          <Switch
            onChange={e => groundChange(e, v2)}
            style={{ marginLeft: 10 }}
            checked={v2.isGrounding}
            checkedChildren="上架"
            unCheckedChildren="下架"
          />
        </div>
      ),
    },
  ];
  const [list, setList] = useState([]);
  const [pageNo, setPageNo] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [total, setTotal] = useState(0);
  const [topList, setTopList] = useState([]);

  // 商家列表
  const [ownerList, setOwnerList] = useState([]);
  const [userName, setUserName] = useState('');
  const [businessManageId, setBusinessManageId] = useState(0);

  const getList = (data: any) => {
    uBusinessManageList({ ...data, manageId }).then((res: any) => {
      const { list, total } = res.data;
      setList(list);
      setTotal(total);
    });
  };
  const toAdd = (v: any, v2: any) => {
    props.history.push({
      pathname: '/businessManage/add',
      state: {
        isAdd: v,
        initData: v ? {} : v2,
        userName,
        businessManageId,
      },
    });
  };
  // 分页改变
  const pageChange = (pageNo: any, pageSize: any) => {
    setPageNo(pageNo);
    setPageSize(pageSize);
    getList({ pageNo, pageSize, businessManageId });
  };
  const toDelete = (v2: any) => {
    confirm({
      title: '提示',
      icon: <ExclamationCircleOutlined />,
      content: '确定删除吗？',
      onOk() {
        uBusinessManageDelete({ id: v2.id }).then(res => {
          getList({ pageNo: 1, pageSize: 10, businessManageId });
        });
      },
    });
  };
  const toTicket = (item: any) => {
    const { id } = item;
    props.history.push({
      pathname: '/businessTicket',
      state: {
        uBusinessId: id,
      },
    });
  };
  const getTypeList = () => {
    uTopList({
      uSchoolId: schoolId,
    }).then(res => {
      res.data.unshift({
        id: 0,
        name: '非爆款区',
      });
      setTopList(res.data);
    });
  };
  const topChange = (e: any, item: any) => {
    const { id } = item;
    uBusinessEnterTop({
      topNum: e,
      id,
    });
  };
  const groundChange = (e: boolean, v: any) => {
    const { id } = v;
    uBusinessManageGround({
      id,
      isGrounding: e ? 1 : 0,
    }).then(res => {
      getList({ pageNo: 1, pageSize: 10, businessManageId });
    });
  };

  // 下拉框改变
  const selectChange = (e: any, v: any) => {
    const key = e ? v.key : 0;
    if (e) {
      setBusinessManageId(parseInt(key));
      const { userName } = ownerList.filter(
        (item: any) => item.manageId === parseInt(key),
      )[0];
      setUserName(userName);
    } else {
      setBusinessManageId(0);
      setUserName('');
    }

    setPageNo(1);
    setPageSize(10);
    getList({ pageNo: 1, pageSize: 10, businessManageId: parseInt(key) });
  };
  const getOwner = () => {
    uSchoolManageList({
      pageNo: 1,
      pageSize: 100000,
      schoolId,
      type: 2,
    }).then((res: any) => {
      const { list, total } = res.data;
      setOwnerList(list);
    });
  };

  // const test = () => {
  //   handleAccount({ ticketCode: '027417887623bs36' });
  // };
  // const test2 = () => {
  //   handleAccountResult({})
  // };
  // const

  useEffect(() => {
    getList({ pageNo, pageSize, businessManageId });
    getTypeList();
    getOwner();
  }, []);
  return (
    <CardCommon>
      <div className={styles.wrap}>
        <div className={styles.btnW}>
          <Select
            placeholder="请选择商铺账号"
            allowClear
            showSearch
            style={{ width: 200, marginBottom: 10 }}
            onChange={selectChange}
          >
            {ownerList.map((item: any, i: any) => (
              <Option key={item.manageId} value={item.name}>
                {item.name}
              </Option>
            ))}
          </Select>
          <Button
            // && !list.length
            disabled={userName ? false : true}
            style={{ marginLeft: 20 }}
            onClick={() => {
              toAdd(1, {});
            }}
            type="primary"
          >
            新增商铺
          </Button>
          {/* <Button onClick={test}>测试</Button>
          <Button onClick={test2}>测试2</Button> */}
        </div>
        <Table
          className="oddTable"
          scroll={{ x: 1300 }}
          dataSource={list}
          columns={columns}
          pagination={{
            showQuickJumper: true,
            total,
            size: 'small',
            pageSize,
            current: pageNo,
            onChange: pageChange,
            showTotal: () => {
              return `总共 ${total} 条记录`;
            },
          }}
        />
      </div>
    </CardCommon>
  );
};
